<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<meta name="viewport" content="user-scalable=no, initial-scale=1, width=device-width" /><!-- Do not change this! -->
		
		<!-- Stylesheets -->
		<!-- jQuery and jQuery Mobile -->
		<link rel="stylesheet" type="text/css" href="./themes/AndroidHolo.min.css" /><!-- ThemeRoller theme -->
		<link rel="stylesheet" type="text/css" href="./themes/jquery.mobile.icons-1.4.5.min.css" />
		<link rel="stylesheet" type="text/css" href="./themes/jquery.mobile.structure-1.4.5.min.css" />
		
		<!-- jpHolo theme -->
		<link rel="stylesheet" type="text/css" href="./themes/jpholo.css" />
		<link rel="stylesheet" type="text/css" href="./themes/jpholo.splitview.css" />
		<link rel="stylesheet" type="text/css" href="./themes/jpholo.cards.css" />
		<link rel="stylesheet" type="text/css" href="./themes/jpholo.spinner.css" />
		<link rel="stylesheet" type="text/css" href="./themes/jpholo.smartphone.css" id="sizeStylesheet" />
		
		<!-- JavaScript -->
		<!-- Cordova PhoneGap --><!-- exclude the scripts below if you are not deploying with PhoneGap -->
		<script type="text/javascript" src="./cordova.js"></script>
		<script type="text/javascript" src="./js/backgroundService-3.1.0.js"></script>
		<script type="text/javascript" src="./js/cordova_custom_plugins.js"></script>
		
		<!-- jQuery -->
		<script type="text/javascript" src="./js/jquery-2.1.1.min.js"></script>
		
		<!-- jQuery Mobile -->
		<script type="text/javascript" src="./js/jquery.mobile.settings.js"></script><!-- this must be loaded before jQuery Mobile -->
		<script type="text/javascript" src="./js/jquery.mobile-1.4.5.min.js"></script>
		
		<!-- Other frameworks -->
		<script type="text/javascript" src="./js/fastclick.js"></script><!-- for speeding op tap events, load this AFTER jQuery Mobile -->
		
		<!-- Application -->
		<!-- Set document, used in jpholo.core.js -->
		<script type="text/javascript">
			window.indexFile = "main.html";
			window.phonegapExcluded = false; // set this value to either true or false, depending on if you load the Cordova PhoneGap scripts.
		</script>
		<!-- jpHolo core -->
		<script type="text/javascript" src="./js/jpholo.core.js"></script>
		<script type="text/javascript" src="./js/jpholo.core.plugins.js"></script>
		<script type="text/javascript" src="./js/jpholo.core.services.js"></script>
		<!-- your scripts -->
		<script type="text/javascript" src="./js/application.js"></script>
		
		<title>jpHolo</title>
	</head>
	<body>
		<!-- exclude the landingPage if you are not deploying with PhoneGap -->
		<div id="landingPage" data-role="page" data-theme="b">
			<div role="main" class="ui-content" data-theme="b">
			</div>
		</div>
	
		<div id="indexPage" data-role="page" data-theme="a"><!-- id to tie the page event to this specific page -->
			
			<!-- left panel  -->
			<div id="panelMenuIndex" data-role="panel" data-theme="b" data-position="left" data-display="overlay" data-dismissible="true" data-position-fixed="true" data-swipe-close="true" data-animate="true" class="transparant">
				<ul id="panelMenuIndexUL" data-role="listview"></ul>
			</div><!-- here you see why in the javascript there is a page event: initPageVarsOnShow('Index'); and: initPageVarsOnCreate('Index'); -->
			<!-- /panel -->
			
			<!-- right panel  -->
			<div id="panelMenuRightIndex" data-role="panel" data-theme="b" data-position="right" data-display="overlay" data-dismissible="true" data-position-fixed="true" data-swipe-close="true" data-animate="true" class="transparant">
				<ul id="panelMenuRightIndexUL" data-role="listview"></ul>
			</div><!-- here you see why in the javascript there is a page event: initPageVarsOnShow('Index'); and: initPageVarsOnCreate('Index'); -->
			<!-- /panel -->
			
			<div class="headerSticky ui-title" data-role="header" data-hide-during-focus="" data-tap-toggle="false" data-position="fixed" data-theme="a">
				<div>
					<p class="headerBarText"><img id="headerTitleIndex" class="headerIconTitle" src="./images/icons/ic_launcher_full_menu.png" /><img id="headerShareIndex" class="headerIconSecondRight" src="./images/icons/ic_action_share_header.png" /><img id="headerOverflowIndex" class="headerIconFirstRight" src="./images/icons/ic_action_overflow_header.png" />
					&nbsp;</p>
				</div><!-- populate the panel menu, also with the id Index in this case -->
			</div><!-- /header -->
			
			<div role="main" class="ui-content" data-theme="a">
				
				<div class="ui-grid-a ui-responsive">
					<div class="ui-block-a">
				
					<h1>Index</h1>
					<p>Holo Light theme with Dark action bar.</p>				
					<a id="clearFirstBoot" data-role="button">Clear to first boot</a><br />
					Uri Intent: <a href="http://jpholo.teusink.eu/index.php?message=jpHoloIntentTest" target="_blank" target="_blank">http://jpholo.teusink.eu/index.php?message=jpHoloIntentTest</a>
					
					</div>
					<div class="ui-block-b">
					
					<h1>About</h1>
					<p>Get jpHolo on GitHub <a href="https://github.com/teusink/jpHolo" target="_blank">here</a></p>
					<p>Frameworks and plugins that are used to make this application template</p>
					<p>- Platform: <a href="http://phonegap.com/" target="_blank">PhoneGap</a><br />
					- Platform: <a href="http://jquerymobile.com/" target="_blank">jQuery Mobile</a><br />
					- Web: <a href="http://www.androidicons.com/" target="_blank">Android Icons</a><br />
					- Javascript plugin: <a href="https://github.com/ftlabs/fastclick" target="_blank">FastClick</a><br />
					- PhoneGap plugin: <a href="https://github.com/Red-Folder/Cordova-Plugin-BackgroundService" target="_blank">Background Service</a><br />
					- PhoneGap plugin: <a href="http://teusink.blogspot.nl/2013/04/phonegap-android-share-plugin.html" target="_blank">Share</a><br />
					- PhoneGap plugin: <a href="http://teusink.blogspot.nl/2013/04/phonegap-android-toast-plugin.html" target="_blank">Toast</a><br />
					- PhoneGap plugin: <a href="http://teusink.blogspot.nl/2013/08/phonegap-android-appstore-plugin.html" target="_blank">Appstore</a><br />
					- PhoneGap plugin: PackageVersion<br />
					- PhoneGap plugin: <a href="http://teusink.blogspot.nl/2013/09/phonegap-android-androidpreferences.html" target="_blank">AndroidPreferences</a>
					</p>
					
					<h1>Suggestions</h1>
					<p>- jQuery Mobile plugin: <a href="http://jqmiconpack.andymatthews.net/#/" target="_blank">JQM Icons</a><br />
					- jQuery Mobile Cards UI: <a href="http://teusink.blogspot.nl/2014/07/cards-user-interface-in-jquery-mobile.html" target="_blank">JQM Cards UI</a><br />
					- PhoneGap plugin: <a href="https://github.com/phonegap-build/PushPlugin" target="_blank">Google Cloud Messaging</a><br />
					- PhoneGap plugin: <a href="https://github.com/phonegap-build/GAPlugin" target="_blank">Google Analytics</a><br />
					- PhoneGap plugin: <a href="http://teusink.blogspot.nl/2013/07/phonegap-android-cachecleaner-plugin.html" target="_blank">CacheCleaner</a><br />
					- PhoneGap plugin: <a href="http://teusink.blogspot.nl/2013/04/phonegap-android-downloader-plugin.html" target="_blank">Downloader</a><br />
					- Javascript plugin: <a href="http://i18next.com/" target="_blank">i18next (multi-language)</a>
					</p>
				
					</div>
				</div>
				
			</div><!-- /content -->
			
			<div data-role="footer" data-hide-during-focus="" data-tap-toggle="false" data-position="fixed" data-theme="b" class="actionbarTransparant">
				<div>
					<img id="footerShareIndex" src="./images/icons/ic_action_share_header.png" class="footerIconLeft">
					<img id="footerToastIndex" src="./images/icons/ic_action_list_header.png" class="footerIconRight">
				</div>
			</div><!-- /footer -->
		
		</div><!-- /page -->
		
		<div id="otherPage" data-role="page" data-theme="a">
			
			<!-- left panel  -->
			<div id="panelMenuOther" data-role="panel" data-theme="b" data-position="left" data-display="overlay" data-dismissible="true" data-position-fixed="true" data-swipe-close="true" data-animate="true" class="transparant">
				<ul id="panelMenuOtherUL" data-role="listview"></ul>
			</div>
			<!-- /panel -->
			
			<!-- right panel  -->
			<div id="panelMenuRightOther" data-role="panel" data-theme="b" data-position="right" data-display="overlay" data-dismissible="true" data-position-fixed="true" data-swipe-close="true" data-animate="true" class="transparant">
				<ul id="panelMenuRightOtherUL" data-role="listview"></ul>
			</div>
			<!-- /panel -->
			
			<div class="headerSticky ui-title" data-role="header" data-hide-during-focus="" data-tap-toggle="false" data-position="fixed" data-theme="a">
				<div>
					<p class="headerBarText"><img id="headerTitleOther" class="headerIconTitle" src="./images/icons/ic_launcher_full_arrow.png" /><img id="headerShareOther" class="headerIconSecondRight" src="./images/icons/ic_action_share_header.png" /><img id="headerOverflowOther" class="headerIconFirstRight" src="./images/icons/ic_action_overflow_header.png" />
					&nbsp;</p>
				</div>
			</div><!-- /header -->
			
			<div role="main" class="ui-content" data-theme="a">
				
				<div class="ui-grid-a ui-responsive">
					<div class="ui-block-a">
				
					<h1>Other Page</h1>
					<p id="systemSpecs"></p>
					
					</div>
					<div class="ui-block-b">
					
					<p id="otherPageContent"></p>
				
					</div>
				</div>
				
			</div><!-- /content -->
		
		</div><!-- /page -->
		
		<div id="uriPage" data-role="page" data-theme="a">
			
			<!-- left panel  -->
			<div id="panelMenuUriMessage" data-role="panel" data-theme="b" data-position="left" data-display="overlay" data-dismissible="true" data-position-fixed="true" data-swipe-close="true" data-animate="true" class="transparant">
				<ul id="panelMenuUriMessageUL" data-role="listview"></ul>
			</div>
			<!-- /panel -->
			
			<!-- right panel  -->
			<div id="panelMenuRightUriMessage" data-role="panel" data-theme="b" data-position="right" data-display="overlay" data-dismissible="true" data-position-fixed="true" data-swipe-close="true" data-animate="true" class="transparant">
				<ul id="panelMenuRightUriMessageUL" data-role="listview"></ul>
			</div>
			<!-- /panel -->
			
			<div class="headerSticky ui-title" data-role="header" data-hide-during-focus="" data-tap-toggle="false" data-position="fixed" data-theme="a">
				<div>
					<p class="headerBarText"><img id="headerTitleUriMessage" class="headerIconTitle" src="./images/icons/ic_launcher_full_arrow.png" /><img id="headerShareUriMessage" class="headerIconSecondRight" src="./images/icons/ic_action_share_header.png" /><img id="headerOverflowUriMessage" class="headerIconFirstRight" src="./images/icons/ic_action_overflow_header.png" />
					&nbsp;</p>
				</div>
			</div><!-- /header -->
			
			<div role="main" class="ui-content" data-theme="a">
				
				<div class="ui-grid-a ui-responsive">
					<div class="ui-block-a">
				
					<h1>Uri page</h1>
					<p>An Uri has been captured by this app. See the message below to see what has been captured.</p>
					
					</div>
					<div class="ui-block-b">
					
					<p id="uriMessage"></p>
				
					</div>
				</div>
				
			</div><!-- /content -->
		
		</div><!-- /page -->
		
		<div id="servicePage" data-role="page" data-theme="a">
			
			<!-- left panel  -->
			<div id="panelMenuService" data-role="panel" data-theme="b" data-position="left" data-display="overlay" data-dismissible="true" data-position-fixed="true" data-swipe-close="true" data-animate="true" class="transparant">
				<ul id="panelMenuServiceUL" data-role="listview"></ul>
			</div>
			<!-- /panel -->
			
			<!-- right panel  -->
			<div id="panelMenuRightService" data-role="panel" data-theme="b" data-position="right" data-display="overlay" data-dismissible="true" data-position-fixed="true" data-swipe-close="true" data-animate="true" class="transparant">
				<ul id="panelMenuRightServiceUL" data-role="listview"></ul>
			</div>
			<!-- /panel -->
			
			<div class="headerSticky ui-title" data-role="header" data-hide-during-focus="" data-tap-toggle="false" data-position="fixed" data-theme="a">
				<div>
					<p class="headerBarText"><img id="headerTitleService" class="headerIconTitle" src="./images/icons/ic_launcher_full_arrow.png" /><img id="headerShareService" class="headerIconSecondRight" src="./images/icons/ic_action_share_header.png" /><img id="headerOverflowService" class="headerIconFirstRight" src="./images/icons/ic_action_overflow_header.png" />
					&nbsp;</p>
				</div>
			</div><!-- /header -->
			
			<div role="main" class="ui-content" data-theme="a">
		
				<table>
				
				<tr class="tdTitle">
					<td colspan=2>Service settings</td>
				</tr>
				
				<tr class="lineBreak">
					<td class="center" colspan=2><p class="thinSettings">Android Service. A service that can execute native Java code in the background in a PhoneGap app on the Android platform.</p></td>
				</tr>
				
				<tr class="lineBreak">
					<td class="left"><p class="bigSettings">Service enabled</p><p class="tinySettings">Enable or disable the service.</p></td>
					<td class="right">
						<select name="flipServiceStatus" id="serviceStatus" data-role="flipswitch" data-corners="false" data-mini="true" data-theme="c">
							<option value="on">on</option>
							<option value="off">off</option>
						</select>
					</td>
				</tr>
				
				<tr class="lineBreak">
					<td class="left"><p class="bigSettings">Set toast duration</p><p class="tinySettings">Show a toast for a shorter or longer period.</p></td>
					<td class="right">
						<select name="flipServiceToastDuration" id="serviceToastDuration" data-role="flipswitch" data-corners="false" data-mini="true" data-theme="c">
							<option value="short">short</option>
							<option value="long">long</option>
						</select>
					</td>
				</tr>
				
				<tr class="lineBreak">
					<td class="left"><p class="bigSettings">Interval timer enabled</p><p class="tinySettings">Execute the service on a given time interval.</p></td>
					<td class="right">
						<select name="flipServiceTimer" id="serviceTimer" data-role="flipswitch" data-corners="false" data-mini="true" data-theme="c">
							<option value="on">on</option>
							<option value="off">off</option>
						</select>
					</td>
				</tr>
				
				<tr class="nonLineBreak">
					<td colspan=2><p class="bigSettings">Set interval to once every...</p><div id="timerDurationStatus" class="darkcyan"></div></td>
				</tr>
				
				<tr class="lineBreak">
					<td colspan=2>
						<div data-role="controlgroup">
							<input type="button" data-theme="c" data-shadow="false" id="toggleTimer1" data-mini="true" value="1 min" />
							<input type="button" data-theme="c" data-shadow="false" id="toggleTimer2" data-mini="true" value="30 min" />
							<input type="button" data-theme="c" data-shadow="false" id="toggleTimer3" data-mini="true" value="1 hour" />
							<input type="button" data-theme="c" data-shadow="false" id="toggleTimer4" data-mini="true" value="6 hours" />
							<input type="button" data-theme="c" data-shadow="false" id="toggleTimer5" data-mini="true" value="12 hours" />
							<input type="button" data-theme="c" data-shadow="false" id="toggleTimer6" data-mini="true" value="1 day" />
						</div>
					</td>
				</tr>
				
				<tr class="nonLineBreak">
					<td colspan=2><p class="bigSettings">Run once</p><p class="tinySettings">Execute the service now and only once.</p></td>
					
				</tr>
				
				<tr class="lineBreak">
					<td colspan=2>
						<div data-role="controlgroup" class="settingButtons">
							<input type="button" id="serviceRunOnce" data-mini="true" value="NOW" />
						</div>
					</td>
				</tr>
				
				<tr class="lineBreak">
					<td class="left"><p class="bigSettings">Start service at boot</p><p class="tinySettings">Restart the service when the device is restarted.</p></td>
					<td class="right">
						<select name="flipServiceBootStatus" id="serviceBootStatus" data-role="flipswitch" data-corners="false" data-mini="true" data-theme="c">
							<option value="on">on</option>
							<option value="off">off</option>
						</select>
					</td>
				</tr>
				
				</table>
			
			</div><!-- /content -->
		
		</div><!-- /page -->
		
		<div id="immersivePage" data-role="page" data-theme="b">
			
			<!-- left panel -->
			<div id="panelMenuImmersive" data-role="panel" data-theme="b" data-position="left" data-display="overlay" data-dismissible="true" data-position-fixed="true" data-swipe-close="true" data-animate="true" class="transparant">
				<ul id="panelMenuImmersiveUL" data-role="listview"></ul>
			</div>
			<!-- /panel -->
			
			<!-- right panel -->
			<div id="panelMenuRightImmersive" data-role="panel" data-theme="b" data-position="right" data-display="overlay" data-dismissible="true" data-position-fixed="true" data-swipe-close="true" data-animate="true" class="transparant">
				<ul id="panelMenuRightImmersiveUL" data-role="listview"></ul>
			</div>
			<!-- /panel -->
			
			<div data-role="header" data-hide-during-focus="" data-tap-toggle="false" data-position="fixed" data-theme="b" data-fullscreen="true" id="headerImmersive" class="headerSticky actionbarTransparant ui-title">
				<div>
					<p class="headerBarText"><img alt="header" id="headerTitleImmersive" class="headerIconTitle" src="./images/icons/ic_launcher_small_arrow.png" /><img alt="header" id="headerShareImmersive" class="headerIconSecondRight" src="./images/icons/ic_action_share_header.png" /><img alt="header" id="headerOverflowImmersive" class="headerIconFirstRight" src="./images/icons/ic_action_overflow_header.png" />
					&nbsp;</p>
				</div>
			</div><!-- /header -->
			
			<div role="main" data-theme="b" id="immersivePhotoDiv" class="ui-content immersivePhotoPage">
				<div id="photoDiv">
					<img alt="Photo" id="photoImmersive" class="immersivePage" src="./images/chromecast.jpg" />
				</div>
				
				<div id="photoInfoDiv">
					<h5>
						<span class="title">2048x1039</span><br />
						<span class="title note">Chromecast Photo</span><br />
						<span class="title">This is an example with immersive content</span>
					</h5>
				</div>
			</div><!-- /content -->
			
			<div data-role="footer" data-hide-during-focus="" data-tap-toggle="false" data-position="fixed" data-theme="b" data-fullscreen="true" id="footerImmersive" class="actionbarTransparant">
				<div>
					<img id="footerShareImmersive" src="./images/icons/ic_action_share_header.png" class="footerIconLeft">
					<img id="footerToastImmersive" src="./images/icons/ic_action_list_header.png" class="footerIconRight">
				</div>
			</div><!-- /footer -->
			
		</div><!-- /page -->
		
	</body>
</html>
